<template>
	<div class="large-screen">
		<!-- <div class='screenBg'>
			<img src="@/assets/screen/screenBg.png" alt="">
		</div> -->
		<div class='screenContainer'>
			<div class='header'>
				<dv-decoration-8 style="width:300px;height:50px;" />
				<div class='screenTitle'>
					<p>家乐洗用户数据中心</p>
					<dv-decoration-5 style="width:300px;height:40px;" />
				</div>
				<dv-decoration-8 :reverse="true" style="width:300px;height:50px;" />
				<!-- 当前时间 -->
				<span class='nowTime'>{{nowTime}}</span>
			</div>
			<div class='container'>
				<div class='tool_part'>
					<div class='part'>
						<dv-border-box-10>
							<dv-decoration-7
								style="width:150px;height:30px;padding:3vh 0;color:white;">平台数据</dv-decoration-7>
							<div class='plateData' style='margin-top:0;'>
								<div class='dataOne'>
									<div class='dataImg'>
										<img src="@/assets/screen/jye.png" alt="">
									</div>
									<div class='dataCount'>{{turnover?turnover:0}}</div>
								</div>
								<div class='dataOne'>
									<div class='dataImg'>
										<img src="@/assets/screen/yh.png" alt="">
									</div>
									<div class='dataCount'>{{users?users:0}}</div>
								</div>
							</div>
						</dv-border-box-10>
					</div>
					<div class='part'>
						<dv-border-box-10>
							<dv-decoration-7
								style="width:150px;height:30px;padding:3vh 0;color:white;">订单数据</dv-decoration-7>
							<div class='plateData' style='justify-content: center;padding-top:0;margin-top:1vh'>
								<div class='tongji'>
									<div class='tjline'><span>总订单量</span>{{orders?orders:0}}</div>
									<div class='tjline'><span>近三十日</span>{{orders_30?orders_30:0}}</div>
									<div class='tjline'><span>近七日</span>{{orders_7?orders_7:0}}</div>
									<div class='tjline'><span>近三日</span>{{orders_3?orders_3:0}}</div>
								</div>
								<div class='dataChart' ref='dataChart' style='position:relative;width:13vw;height:20vh;'>
									
								</div>
							</div>
						</dv-border-box-10>
					</div>
					<div class='part'>
						<dv-border-box-10>
							<dv-decoration-7
								style="width:150px;height:30px;padding:3vh 0;color:white;">订单数据</dv-decoration-7>
							<div id="charts-user" ref='userCharts' class="echart" style='width:100%;height:20.5vh;'>
							</div>
						</dv-border-box-10>
					</div>
				</div>
				<div class='tool'>
					<div id="chinaMap" ref='chinaMap' style="z-index: 1;width:90vh;height:90vh;"></div>
				</div>
				<div class='tool_part'>
					<div class='part'>
						<dv-border-box-10>
							<dv-decoration-7
								style="width:150px;height:30px;padding:3vh 0;color:white;">月活跃度</dv-decoration-7>
							<div id="charts-active" ref='activeCharts' class="echart" style='width:100%;height:70%;'>
							</div>
						</dv-border-box-10>
					</div>
					<div class='part' style='height:59vh'>
						<dv-border-box-10>
							<dv-decoration-7
								style="width:150px;height:30px;padding:3vh 0;color:white;">门店数据</dv-decoration-7>
							<!-- <dv-scroll-board v-if='store.data.length' :config="store" style="width:90%;height:50vh;margin:10px auto 0;background: linear-gradient(90deg, rgba(32,110,227,0.5) 0%, rgba(32,110,227,0.2) 100%);" /> -->
							<table 
								style="display:block;line-height:5px;border-radius:4px;width:90%;max-height:50vh;margin:10px auto 0;background: linear-gradient(90deg, rgba(32,110,227,0.5) 0%, rgba(32,110,227,0.2) 100%);">
								<tr style='background:rgba(32,110,227,0.01);width:100%;text-align:center;color:white;font-weight:400;'>
									<th style='height:4vh;border:1px solid #178CC3;width:40vw;text-align:left;padding:0 12px;box-sizing:border-box'>门店名称</th>
									<th style='height:4vh;border:1px solid #178CC3;width:25%'>数量</th>
									<th style='height:4vh;border:1px solid #178CC3;width:25%'>订单金额</th>
								</tr>
								<tr style='font-size:12px;width:100%;text-align:center;color:#2CF0FF;font-weight:400;' v-for='(item,index) in storeList' :key='index'>
									<td style='height:3.5vh;border:1px solid #178CC3;width:40%;text-align:left;padding:0 12px;box-sizing:border-box'>{{item.name}}</td>
									<td style='height:3.5vh;font-size:13px;font-weight:bold;border:1px solid #178CC3;width:20%;color:#FFDB5E;'>{{item.orders}}</td>
									<td style='height:3.5vh;font-size:13px;font-weight:bold;border:1px solid #178CC3;width:40%;color:#FFDB5E;'>￥{{item.turnover.toFixed(2)}}</td>
								</tr>
							</table>
						</dv-border-box-10>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { largeScreen } from '@/api/menu'
	import * as echarts from 'echarts';
	import chinamap from "echarts/map/json/china.json";
	import provinces from "@/assets/js/map.json";
	let timer = null;
	export default {
		data() {
			return {
				users:0,
				turnover:0,
				orders:0,
				orders_30:0,
				orders_7:0,
				orders_3:0,
				
				nowTime: '', //当前时间
				// 平台数据
				turnover: '',
				users: '',
				// 用户数据
				userData: {
					data: [{
						value: 100,
						name: '已完成'
					}, {
						value: 100,
						name: '进行中'
					}, {
						value: 100,
						name: '待付款'
					}],
				},
				storeList:[],
				// 门店列表
				store: {
					header: ['门店名称', '订单数', '金额'],
					data: [],
					rowNum: 10,
					headerBGC: '#1852A8',
					columnWidth: [140],
					evenRowBGC: 'none',
					oddRowBGC: 'none',
				},
				// 中部飞线图
				flyData: {

				}
			}
		},
		created() {
			timer = setInterval(() => {
				this.nowTime = this.timestampToTime(new Date().getTime() / 1000);
			}, 1000)
		},
		mounted() {
			this.initData();
		},
		methods: { 
			// 接口数据
			initData(){
				largeScreen({}).then(res=>{
					if(res.status == 0){
						this.users = res.data.users;
						this.turnover = res.data.turnover.toFixed(2);
						this.orders = res.data.orders;
						this.orders_30 = res.data.orders_30;
						this.orders_7 = res.data.orders_7;
						this.orders_3 = res.data.orders_3;
						// 订单数据
						this.initOrderData(res.data);
						// 门店列表
						if(res.data.storeList.length > 10){
							res.data.storeList = res.data.storeList.slice(0,11);
						}
						res.data.storeList.sort(this.sortBy('turnover',false));
						this.storeList = res.data.storeList;
						// res.data.storeList.forEach((item,index)=>{
						// 	this.store.data.push([item.name,item.orders.toString(),item.turnover.toFixed(2)]);
						// })
						// 用户数据
						this.initUserData(res.data);
						// 月活跃度数据
						this.initActiveData(res.data);
						// 中间地图
						this.initChinaMap(res.data);
					}else{
						this.$message.error(res.msg);
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 订单数据 
			initOrderData(datas){
				var orderCharts = this.$echarts.init(this.$refs.dataChart);
				let option = {
						tooltip: {
							trigger: 'item'
						}, 
						color: ['#0053FF','#FFCC26','#F3F3F3'],
						legend: {
						    top: '2px',
						    left: 'center',
							icon: 'circle',
							itemWidth: 6,
							itemHeight:6,
							textStyle:{
								color:'#ffffff',
								fontSize:11,
							},
						},
						series: [
							{
							type: 'pie',
							radius: ['38%', '50%'],
							avoidLabelOverlap: false,
							itemStyle: {
								borderRadius: 10,
								borderColor: '#fff',
								borderWidth: 2
							},
							
							emphasis: {
								label: {
									show: true,
									fontSize: 16,
									fontWeight: 'bold'
								}
							},
							label: {
								formatter: '{d}%',// 显示百分比，
							},
							labelLine:{
								normal: {
									show: true,//开启提示线展示
									length:1,//设置第一条提示线长度
									lineStyle: {
									  color: 'white'
									}
								}
							},
							data: [
								{ value:datas.orders_ed, name: '已完成' },
								{ value:datas.orders_ing, name: '进行中' },
								{ value:datas.orders_df, name: '待付款' },
							]
						}
					]
				};
				orderCharts.setOption(option);
				window.onresize = orderCharts.resize;
			},
			initChinaMap(datas){
				let mapEcharts = this.$echarts.init(this.$refs.chinaMap);
				let chinaGeoCoordMap = {};
				datas.storeList.forEach((item,index)=>{
					chinaGeoCoordMap[item.name] = [item.lng,item.lat];
				})
				// 散点
				const chinaDatas = []
				const mapObject = {name: '', value: null}
				// 飞线
				const lineObject = {"coords": [[117.1582, 36.8701]]}
				const linesCoord = []
				for (const key in chinaGeoCoordMap) {
					mapObject.name = key
					mapObject.value = chinaGeoCoordMap[key]
					chinaDatas.push(JSON.parse(JSON.stringify(mapObject)))
					if (key !== '山东') {
						lineObject.coords[1] = chinaGeoCoordMap[key]
						// linesCoord.push(JSON.parse(JSON.stringify(lineObject)))
					}
				}
				// this.$echarts.registerMap("china", chinamap);
				this.$echarts.registerMap("provinces", provinces);
				var option = {
					geo: {
						type: "map",
						map: "provinces", //使用 registerMap 注册的地图名称
						// map: "china", //使用 registerMap 注册的地图名称
						show: true,
						roam: true,
						scaleLimit:{
							min:4,
							max:6,
						},
						top: '60px',
						bottom:'60px',
						label: {
							emphasis: {
								show: false
							}
						},
						itemStyle: {
							normal: {
								// areaColor: 'rgba(37, 157, 255, 0.8)',
								areaColor: '#09184F',
								borderColor: '#FFFFFF',
								shadowColor: '#09184F',
								shadowBlur: 20
							}
						}
					},
					series: [
						{
							type: 'effectScatter',
							coordinateSystem: 'geo',
							// 要有对应的经纬度才显示，先经度再维度
							data: chinaDatas,
							showEffectOn: 'render',
							rippleEffect: {
								scale: 4, // 波纹的最大缩放比例
								brushType: 'stroke'
							},
							hoverAnimation: true,
							label: {
								normal: {
									show: true,
									formatter: '{b}',
									position: 'right',
									fontWeight: 500,
									fontSize: 14
								}
							},
							itemStyle: {
								normal: {
									color: '#00e3ff',
									shadowBlur: 10,
									shadowColor: '#333'
								}
							},
							emphasis: {
								itemStyle: {
									color: '#f4e925' // 高亮颜色
								}
							},
							zlevel: 1
						},
						{
							type: 'lines',
							coordinateSystem: 'geo',
							zlevel: 1,
							effect: {
								show: true, period: 5, trailLength: 0, symbol: 'arrow', color: '#01AAED', symbolSize: 8,
							},
							lineStyle: {
								normal: {width: 1.2, opacity: 0.6, curveness: 0.2, color: '#FFB800'}
							},
							data: linesCoord
						}
					],
					tooltip: {
					  //数据格式化
					  backgroundColor: "transparent",
					  borderColor:'transparent',
					  padding: 0,
					  borderWidth:0,
					  formatter: function(params, callback) {
						let store = datas.storeList.find((item,index)=>{return item.name == params.name});
						var str = `<div style = "padding:12px 15px;font-size:12px;box-sizing:border-box;background:url( ${require("../../assets/screen/tooltipBg.png")}) no-repeat;background-size:100% 100%;width:185px;height:90px; ">
										<span style='color:#FFAA24;font-size:14px;'>${store.name}</span><br/> 订单数量：${store.orders}<br/>订单金额：￥${store.turnover.toFixed(2)}</div>`;
					    /* return (
							"<span style='color:#FFAA24'>"+store.name + "</span><br />订单数量：" + store.orders + "<br/>订单金额：￥" + store.turnover.toFixed(2)
					    ); */
						return str;
					  },
					},
				}
				mapEcharts.setOption(option);
				window.onresize = mapEcharts.resize;
			},
			// 月活跃度数据
			initActiveData(datas) {
				var activeCharts = this.$echarts.init(this.$refs.activeCharts);
				var xData = datas.monthUsers.map((item,index)=>{ return item.day+'号'});
				var z_yDAta = datas.monthUsers.map((item,index)=>{ return item.z_users});
				var hy_yDAta = datas.monthUsers.map((item,index)=>{ return item.hy_users});
				var xz_yDAta = datas.monthUsers.map((item,index)=>{ return item.xz_users});
				let option = {
					xAxis: {
						type: 'category',
						data: xData,
						axisLabel: { //x轴文字的配置
							show: true,
							textStyle: {
								color: "#fff",
							}
						},
					},
					yAxis: {
						type: 'value',
						axisLabel: { //x轴文字的配置
							show: true,
							textStyle: {
								color: "#fff",
							}
						},
					},
					legend: {
						data: ['总用户', '新增用户', '活跃用户'],
						textStyle: {
							color: "#fff",
						}
					},
					grid: {
						top: '30px',
						left: '3%',
						right: '4%',
						bottom: '2px',
						containLabel: true,
					},
					tooltip: { //鼠标悬浮提示数据
						rigger: 'axis'
					},
					series: [{
							name: '总用户',
							data: z_yDAta,
							type: 'line',
							label: {
								show: true,
								position: 'top',
								formatter: '{c}',
							},
							itemStyle: {
								normal: {
									color:'#1D80DA',
									lineStyle: {
										color: '#1D80DA' //改变折线颜色
									}
								}
							}
						},
						{
							name: '新增用户',
							data: xz_yDAta,
							type: 'line',
							label: {
								show: true,
								position: 'top',
								formatter: '{c}',
							},
							itemStyle: {
								normal: {
									color:'#02F4FF',
									lineStyle: {
										color: '#02F4FF' //改变折线颜色
									}
								}
							}
						},
						{
							name: '活跃用户',
							data: hy_yDAta,
							type: 'line',
							label: {
								show: true,
								position: 'top',
								formatter: '{c}',
							},
							itemStyle: {
								normal: {
									color:'#E3BC2D',
									lineStyle: {
										color: '#E3BC2D' //改变折线颜色
									}
								}
							}
						}
					]
				};
				activeCharts.clear();
				activeCharts.setOption(option);
				window.onresize = activeCharts.resize;
			},
			// 用户数据
			initUserData(datas) {
				var userCharts = this.$echarts.init(this.$refs.userCharts);
				let month = datas.yearOrders.map((item,index)=>{return item.month + '月'});
				let yData = datas.yearOrders.map((item,index)=>{return item.orders});
				let option = {
					xAxis: {
						type: 'category',
						data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
						axisLabel: { //x轴文字的配置
							show: true,
							textStyle: {
								color: "#fff",
							}
						},
					},
					yAxis: {
						type: 'value',
						axisLabel: { //x轴文字的配置
							show: true,
							textStyle: {
								color: "#fff",
							}
						},
					},
					grid: {
						top: '20px',
						left: '3%',
						right: '4%',
						bottom: '6px',
						containLabel: true,
					},
					tooltip: { //鼠标悬浮提示数据
						rigger: 'axis'
					},
					series: [{
						data: yData,
						type: 'bar',
						label: {
							show: true,
							position: 'top',
							formatter: '{c}',
						},
						itemStyle: {
							barBorderRadius: [2, 2, 0, 0], //柱体圆角   
							normal: {
								color:"#2E9EFF",
								label: {
									show: true, //设置显示文字
									position: 'top'
								}
							}
						}
					}]
				};
				userCharts.clear();
				userCharts.setOption(option);
				window.onresize = userCharts.resize;
			},
			timestampToTime(timestamp) {
				var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return Y + M + D + h + m + s;
			},
			sortBy(attr,rev){
				if(rev){
					rev = 1;
				}else{
					rev = (rev) ? 1 : -1;
				}
				return function(a,b){
					a = a[attr];
					b = b[attr];
					if(a < b){
						return rev * -1;
					}
					if(a > b){
						return rev * 1;
					}
					return 0;
				}
			}
		}
	}
</script>

<style>
	.tongji {
		width: 45%;
		text-align: left;
		padding-left:2vw;
		box-sizing:border-box;
	}
	.tongji .tjline span {
		display: inline-block;
		text-align: left;
		width: 5vw;
		font-size: 1vw;
		background: linear-gradient(180deg, #4CBAFF 0.146484375%, #FFFFFF 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		margin-right: .5vw;
	}

	.tongji .tjline {
		font-size: 20px;
		font-weight: bold;
		color: #3BE0E8;
	}

	.container .tool_part {
		width: 27.5%;
	}

	.container .tool_part .part .plateData {
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: flex-start;
		margin-top: 12px;
		padding: 4vh 0;
	}

	.tool_part .part .plateData .dataOne {
		/* width: 130px; */
		width: 42.5%;
		position: relative;
	}

	.part .plateData .dataOne .dataCount {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		text-align: center;
		font-size: 2rem;
		line-height: 40px;
		color: #3BE0E8;
		font-weight: bold;
	}

	.tool_part .part {
		height: 28.5vh;
	}

	.container .tool_part .part:nth-child(2) {
		margin: 12px 0;
	}

	.container .tool {
		width: 43%;
		height: 88vh;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.container {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.screenTitle {
		flex: 1;
		text-align: center;
		color: white;
		font-size: 22px;
		font-weight: bold;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.header .nowTime {
		position: absolute;
		right: 70px;
		top: 8px;
		color: white;
		font-weight: bold;
		font-size: 14px;
	}

	.screenTitle p {
		margin-bottom: 0;
	}

	.header {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.large-screen {
		width: 100%;
		overflow:auto;
		position: fixed;
		top:0;
		left:0;
		z-index:10;
	}

	.screenContainer {
		width: 100%;
		/* position: absolute;
		top: 0;
		left: 0; */
		padding: 12px;
		box-sizing: border-box;
		background-image: url(~@/assets/screen/screenBg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.screenBg {
		width: 100%;
	}

	.ant-layout-footer {
		display: none;
	}

	.ant-layout-content {
		margin: 0;
		padding: 0;
	}

	.ant-pro-basicLayout-content {
		margin: 0;
		padding: 0;
	}

	img {
		width: 100%;
		display: block;
	}
</style>